<template>

  <view v-if="!isMobile">


  <el-dialog v-model="centerDialogVisible" title="Update" width="500" center>
    <span>
      请输入你要更新待办事件的内容
    </span>
    <template #footer>
      <el-input size="large" :model-value="this.todos[this.update_todos_index].text" @input="updateNewTodo" v-bind="$attrs" placeholder="请输入任务" ></el-input>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <div class="do_list">
    <div>
      <el-radio-group v-model="currentFilter">
        <el-radio-button label="all"  @mouseover="buttonHover('all')" @mouseleave="buttonLeave">全部</el-radio-button>
        <el-radio-button label="incomplete" @mouseover="buttonHover('incomplete')" @mouseleave="buttonLeave">未完成</el-radio-button>
        <el-radio-button label="completed" @mouseover="buttonHover('completed')" @mouseleave="buttonLeave">已完成</el-radio-button>
      </el-radio-group>
    </div>
    <p class="task-count">任务数量：{{ todos.length }}</p>
    <el-table :data="filteredTodos_pc">
      <el-table-column label="待办事项" width="220">
        <template #default="scope">
          {{ scope.row.text }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="toggleCompleted(scope.row.index_value)" :type="scope.row.completed ? 'success' : 'warning'">
            {{ scope.row.completed ? '已完成' : '未完成' }}
          </el-button>
          <el-button @click="update_todos_index=scope.row.index_value;centerDialogVisible=true" type="info" >
            更新
          </el-button>
          <el-button @click="removeTodo(scope.row.index_value)" type="danger">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </view>

  <view v-else>

    <!-- 圆角弹窗（居中） -->
    <van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" closeable close-icon="close">
      <van-field
          :model-value="this.todos[update_todos_index].text"
          placeholder="请输入任务"
          size="large"
          style="width: 95%; margin-right: 20px; justify-items: center"
          @input="updateNewTodo_mb"
          @confirm="showCenter = false"
          data-test="todo-input"
          clearable
          >

        <template #button>
          <van-button icon="edit" type="primary" @click.native="showCenter = false" />
        </template>
      </van-field>
    </van-popup>


    <div>
      <!-- 触发下拉选择的按钮 -->
<!--      <van-button @click.native="showPopup = true">选择状态</van-button>-->
      <van-field
          v-model="this.currentFilter_text"
          is-link
          readonly
          label="状态"
          placeholder="显示状态"
          @click.native="showPopup = true"
      />
      <van-popup v-model:show="showPopup" round position="bottom">
        <van-picker
            :columns="columns"
            @cancel="showPopup = false"
            @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <p class="task-count">任务数量：{{ todos.length }}</p>

    <van-collapse v-model="activeName" accordion>
      <van-collapse-item
          v-for="(todo, index) in filteredTodos_data"
          :key="index"
          :title="todo.text"
          :name="index.toString()"
      >
<!--        <template #button>-->
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
          <van-button :type="todo.completed ? 'success' : 'warning'" @click.native="toggleCompleted(index)" :icon="todo.completed ? 'passed' : 'clock-o'">{{ todo.completed ? '已完成' : '未完成' }}</van-button>
          <van-button icon="records-o" type="primary" @click.native="update_todos_index=todo.index_value;showCenter = true" >修改</van-button>
          <van-button icon="delete-o" type="danger" @click.native="removeTodo(todo.index_value)" >删除</van-button>
        </div>

<!--        </template>-->
      </van-collapse-item>
    </van-collapse>

  </view>
</template>

<style>

</style>

<script>
import {ref} from "vue";
import {isMobile} from "@/components/isMobile";

export default {
  props: ['todos'],
  data() {
    return {
      currentFilter: 'all',
      buttonHovered: null,
      todoUpdateItems:[],
      centerDialogVisible:ref(false),
      update_text:"",
      update_todos_index:'',
      activeName: ref(''),
      filteredTodos_data: ref(this.filteredTodos),
      showPopup: false,
      showCenter: false,
      currentFilter_text: ref('全部'),
      columns : [
        { text: '全部', value: 'all' },
        { text: '未完成', value: 'incomplete' },
        { text: '已完成', value: 'completed' },
      ]
    };
  },
  computed: {
    isMobile()
    {
      return isMobile();
    },
    filteredTodos_pc() {
      // console.log(this.currentFilter)
      // 创建一个空数组来存储过滤后的待办事项
      let filtered = [];

      // 根据 currentFilter 的值来过滤 todos
      if (this.currentFilter === 'all') {
        this.todos.forEach((todo, index) => {
          // 添加一个 index_value 属性来存储原始索引
          filtered.push({ ...todo, index_value: index });
        });
      } else if (this.currentFilter === 'incomplete') {
        this.todos.forEach((todo, index) => {
          if (!todo.completed) {
            // 对于未完成的待办事项，添加 index_value 并推入过滤数组
            filtered.push({ ...todo, index_value: index });
          }
        });
      } else if (this.currentFilter === 'completed') {
        this.todos.forEach((todo, index) => {
          if (todo.completed) {
            // 对于已完成的待办事项，添加 index_value 并推入过滤数组
            filtered.push({ ...todo, index_value: index });
          }
        });
      }
      // console.log(filtered)
      this.filteredTodos_data = filtered;
      return filtered;
    },
  },
  watch: {
    todos: {
      handler() {
        this.filteredTodos();
      },
      deep: true // This ensures that nested properties within the todos array are watched
    }
  },
  methods: {
    onConfirm(values) {
      // 根据用户选择更新 currentFilter
      switch (values.selectedIndexes[0]) {
        case 0:
          this.currentFilter = 'all';
          this.currentFilter_text = "全部";
          break;
        case 1:
          this.currentFilter = 'incomplete';
          this.currentFilter_text = "未完成";
          break;
        case 2:
          this.currentFilter = 'completed';
          this.currentFilter_text = "已完成";
          break;
      }
      this.showPopup = false; // 关闭弹窗
      this.filteredTodos();
    },
    filteredTodos() {
      // console.log(this.currentFilter)
      // 创建一个空数组来存储过滤后的待办事项
      let filtered = [];

      // 根据 currentFilter 的值来过滤 todos
      if (this.currentFilter === 'all') {
        this.todos.forEach((todo, index) => {
          // 添加一个 index_value 属性来存储原始索引
          filtered.push({ ...todo, index_value: index });
        });
      } else if (this.currentFilter === 'incomplete') {
        this.todos.forEach((todo, index) => {
          if (!todo.completed) {
            // 对于未完成的待办事项，添加 index_value 并推入过滤数组
            filtered.push({ ...todo, index_value: index });
          }
        });
      } else if (this.currentFilter === 'completed') {
        this.todos.forEach((todo, index) => {
          if (todo.completed) {
            // 对于已完成的待办事项，添加 index_value 并推入过滤数组
            filtered.push({ ...todo, index_value: index });
          }
        });
      }
      // console.log(filtered)
      this.filteredTodos_data = filtered;
      return filtered;
    },
    updateNewTodo(event) {
      // 更新本地数据
      this.todos[this.update_todos_index].text=event;
    },
    updateNewTodo_mb() {
      // 不需要从事件对象中获取数据，直接使用 v-model 绑定的 mb_input
      console.log(this.todos[this.update_todos_index].text);
      this.$emit('update:newTodo', this.todos[this.update_todos_index].text);
    },
    removeTodo(index) {
      this.$emit('remove', index);
      this.filteredTodos();
      this.activeName="";
    },
    showAll() {
      this.currentFilter = 'all';
    },
    showIncomplete() {
      this.currentFilter = 'incomplete';
    },
    showCompleted() {
      this.currentFilter = 'completed';
    },
    buttonHover(filter) {
      this.buttonHovered = filter;
    },
    buttonLeave() {
      this.buttonHovered = null;
    },
    toggleCompleted(index) {
      this.todos[index].completed = !this.todos[index].completed
    },
  }
}
</script>
